<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText" @click="goToLogin()">登录</block>
			<block slot="content">注册</block>
		</cu-custom>
		
		<!--注册第一步 基本信息-->
		<form v-if="this.step==1">
			<view class="cu-form-group margin-top">
				<view class="title">用户名</view>
				<input placeholder="手机号" name="input" v-model="userData.loginName"></input>
				<button class='cu-btn bg-green shadow' @click="sendSms()" >验证码
				<span v-show='this.smsCodeTimtOut<60 && this.smsCodeTimtOut>0'>{{smsCodeTimtOut}}</span>
				</button>
			</view>
			<view class="cu-form-group">
				<view class="title">密&nbsp;&nbsp;&nbsp;码</view>
				<input placeholder="请输入密码" name="input" v-model="userData.loginPwd"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" name="input"></input>
			</view>
			<view class="padding-lr">
				<button class="cu-btn block bg-blue margin-tb-sm lg" @click="registerOne()">注  册</button>
			</view>
		</form>
		  
		<!--注册第二步 完善资料-->
		<view v-if="this.step==2">
			<form>
				<view class="cu-form-group margin-top">
					<view class="title">昵&nbsp;&nbsp;&nbsp;称</view>
					<input placeholder="" name="input"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">邮&nbsp;&nbsp;&nbsp;箱</view>
					<input placeholder="" name="input"></input>
				</view> 
				<view class="cu-form-group">
					<view class="title">岗&nbsp;&nbsp;&nbsp;位</view>
					<picker @change="positionChange" :value="positionIdx" :range="position">
						<view class="picker">
							{{positionIdx>-1?position[positionIdx]:'请选择岗位'}}
						</view>
					</picker>
				</view>
				<view class="padding-lr">
					<button class="cu-btn block bg-blue margin-tb-sm lg" type="">完成注册</button>
					<button class="cu-btn block bg-brown margin-tb-sm lg" type="">跳过</button>
				</view>
			</form>
		</view>
		 
	</view>
</template>

<script>
	import msgtool from '../../common/utils/msgtools.js'
	import verifytools from '../../common/utils/verifyform.js'
	export default {
		data() {
			return {
				step:1,
				imgList:[],
				positionIdx:-1,
				position:['测试','前端','后端','数据库','产品设计'],
				smsCodeTimtOut: 60,
				modalName:'Modal',
				userData: {
					loginName: '',
					loginPwd: ''
				}
			}
		},
		created() {
		},
		mounted() {
			this.step=1;
		},
		methods: {
			positionChange(e){
				 this.positionIdx = e.detail.value;
			},
			sendSms(e){
				if(!this.userData.loginName){
					msgtool.error('请输入正确的手机号');
					return false;
				} 
				msgtool.success('短信已发送');
				if (this.smsCodeTimtOut>0){
					setInterval(()=>{
						if(this.smsCodeTimtOut >0){
							this.smsCodeTimtOut --;
						}
					},1000);
				}else{
					clearInterval();
				}		
			},
			hideModal(){
				this.modalName = '';
			},
			registerOne() {
				//验证
				
				this.step=2;
			},
			goToLogin(){
				debugger
				uni.navigateTo({
					url:'login'
				})
			}
		}
	}
</script>

<style>

</style>
